<template>
    <Modal v-model="modal" :title="title">
        <div class="tag-modal">
            <div class="content">
                <Table
                    stripe
                    :columns="list.columns"
                    :data="list.data"
                    no-data-text="亲，没有找到相关记录哦！~"
                ></Table>
                <Loader :status="list.status" @refresh="getData"></Loader>
            </div>
        </div>
        <div slot="footer">
            <Button @click="modal = false" size="large" type="text">关闭</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    data () {
        return {
            orderSn: '',
            itemId: '',
            reportDate: '',
            modal: false,
            loading: false,
            title: '所包含的条码',
            list: {
                current: 1,
                size: 20,
                columns: [
                    {
                        title: '单号',
                        key: 'barcode',
                        align: 'left',
                        minWidth: 280,
                        render: (h, params) => {
                            return h('span', {
                                class: 'codeName-' + params.row.id,
                            }, params.row.barcode)
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'left',
                        minWidth: 160,
                        render: (h, params) => {
                            return h('a', {
                                class: 'btn',
                                attrs: {
                                    'data-clipboard-target': '.codeName-' + params.row.id,
                                    'data-clipboard-text': params.row.barcode,
                                    'data-clipboard-action': 'copy'
                                },
                                on: {
                                    click: () => {
                                        this.onCopy()
                                    }
                                }
                            }, '复制')
                        }
                    }
                ],
                data: [],
                loading: false
            }
        }
    },
    methods: {
        open (item) {
            this.itemId = item.purchOrderItemId
            this.orderSn = item.purchOrderSn
            this.reportDate = item.reportDate
            this.modal = true
            this.getData()
        },
        onCopy () {
            let clipboard = new this.$clipboard('.btn')
            clipboard.on('success', e => {
                this.$Message.success('复制成功')
                clipboard.destroy() //使用destroy可以清除缓存
            })
            clipboard.on('error',e => {
                this.$Message.error('复制失败，请手动复制')
                clipboard.destroy()
            })
        },
        getData (p) {
            this.list.loading = true
            let params = {
                itemId: this.itemId,
                orderSn: this.orderSn,
                reportDate: this.reportDate
            }
            this.$ajaxGet('/report/special_tire_shipment_statistic/list_barcode', params).then(res => {
                this.list.data = res || []
                this.list.loading = false
            })
        }
    }
}
</script>